<script setup lang="ts">
    import { ref, reactive, onMounted, computed } from 'vue';
    import { LastCommentItem } from '@/services/type';
    import { api } from '@/services/api';
    import moment from 'moment';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { useUserStore } from '@/stores/user';

    const userStore = useUserStore();

    // 属性
    const { yhnm } = defineProps<{yhnm: string}>();

    // 评论列表
    const commentList = reactive<LastCommentItem[]>([]);
    // 初始化加载中
    const loading = ref(true);
    // 是否最后一页
    const isLast = ref(false);
    // 游标值
    const cursor = ref('');
    // 加载参数
    const loadMoreParam = reactive({
        loadName: "点击加载更多",
        loading: false,
        disabled: false
    });

    // 是否当前用户
    const isCurrentUser = computed(() => userStore.userInfo.yhnm === yhnm);

    // 获取用户评论列表信息
    const queryUserCommentList = async () => {
        // 调用用户收藏列表信息接口
        const response = await api.comment.queryUserCommentList({
            // 用户内码
            yhnm,
            // 游标值
            cursor: cursor.value,
            // 分页数量
            pageSize: 10
        });
        if(response.code === 0) {
            // 结果赋值
            commentList.push(...response.data.list);
            // 是否最后一页
            isLast.value = response.data.isLast;
            // 游标值
            cursor.value = response.data.cursor;
            // 如果是最后一页
            if(isLast.value) {
                loadMoreParam.loadName = "已经到底了";
                loadMoreParam.disabled = true;
            }
            loadMoreParam.loading = false;
        }
    }

    // 删除评论信息
    const deleteComment = (commentId: number) => {
        ElMessageBox.confirm(
            '删除评论后，评论下所有回复都会被删除，是否继续？',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(async () => {
            const response = await api.comment.deleteComment({
                // 评论ID
                commentId
            });
            if(response.code === 0) {
                ElMessage.success("删除评论成功");
                // 获取当前评论信息下标
                const index: number = commentList.findIndex((item) => item.comment_id === commentId);
                if(index >= 0) {
                    // 从用户评论列表中移除
                    commentList.splice(index, 1);
                }
            }
        }).catch(() => {
            
        });
    }

    onMounted(async () => {
        // 初始化数据
        await queryUserCommentList();
        // 初始化加载结束
        loading.value = false;
    });

</script>
<template>
    <el-skeleton :loading="loading" :rows="3" animated>
        <template #default>
            <div class="nodata" v-if="commentList.length == 0">
                <svg-icon href='#icon-nodata' width="250px" height="250px"></svg-icon>
                <br/>
                <span style='color: darkcyan;'>-暂无评论-</span>
            </div>
            <ul class="comment-data" v-if="commentList.length != 0">
                <li v-for="(item, index) in commentList" :key="index">
                    <div class="blog-title">
                        <div><span style="color: #797C80;">评论于：</span><a class="block-fea" :href="'/blog/detail/' + item.wznm">{{ item.title }}</a></div>
                    </div>
                    <p class="comment-content" v-html="item.content"></p>
                    <span class="time">{{ moment(item.comment_time).startOf('minute').fromNow() }}</span>
                    <div class="oper-bar" v-if="isCurrentUser">
                        <el-popover
                            placement="bottom-end"
                            trigger="click"
                            :show-arrow="false"
                            :open-delay="500"
                            :width="65"
                        >
                            <ul class="more-ul">
                                <li class="more-li-item">
                                    <a class="more-delete" @click="deleteComment(item.comment_id)">
                                        <el-icon style="margin-top: -4px;"><Delete /></el-icon>&nbsp;<span>删除评论</span>
                                    </a>
                                </li>
                            </ul>
                            <template #reference>
                                <el-icon class="more-oper-icon"><MoreFilled /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                </li>
            </ul>
            <div class="load-more" v-if="commentList.length != 0">
                <el-button type="primary" 
                    :loading="loadMoreParam.loading" 
                    style="margin-top: 15px;width: 150px;"
                    :disabled="loadMoreParam.disabled"
                >
                    {{loadMoreParam.loadName}}
                </el-button>
            </div>
        </template>
    </el-skeleton>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />